<template>
  <section class="department-section">
    <h2>部门导航</h2>
    <div class="department-grid">
      <div 
        v-for="dept in departments" 
        :key="dept.name" 
        class="department-card"
        @click="navigateToDepartment(dept)"
      >
        <component :is="dept.iconComponent" class="department-icon" />
        <span>{{ dept.name }}</span>
      </div>
    </div>
  </section>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
// 导入SVG图标组件
import IconVoice from '@/components/icons/IconVoice.vue';
import IconMicrophone from '@/components/icons/IconMicrophone.vue';
import IconHost from '@/components/icons/IconHost.vue';
import IconTech from '@/components/icons/IconTech.vue';
import IconOffice from '@/components/icons/IconOffice.vue';
import IconMedia from '@/components/icons/IconMedia.vue';

const router = useRouter();
const authStore = useAuthStore();

const departments = [
  { name: '采播部', iconComponent: IconVoice, path: '' },
  { name: '电台部', iconComponent: IconMicrophone, path: '/buyuan/diantai' },
  { name: '主持队', iconComponent: IconHost, path: '/buyuan/zhuchi' },
  { name: '技术部', iconComponent: IconTech, path: '/buyuan/jishu' },
  { name: '办公室', iconComponent: IconOffice, path: '/buyuan/bangongshi' },
  { name: '新媒体中心', iconComponent: IconMedia, path: '/buyuan/xinmeiti' }
];

const navigateToDepartment = (dept) => {
  let path = '';
  // 保留原路由逻辑，无需修改
  if (dept.name === '采播部') {
    path = authStore.user?.role === 'member' ? '/buyuan/caibo' : '/buzhang/caibo';
  } else if (dept.name === '电台部') {
    path = authStore.user?.role === 'member' ? '/buyuan/diantai' : '/buzhang/diantai';
  } else if (dept.name === '主持队') {
    path = authStore.user?.role === 'member' ? '/buyuan/zhuchi' : '/buzhang/zhuchi';
  } else if (dept.name === '技术部') {
    path = authStore.user?.role === 'member' ? '/buyuan/jishu' : '/buzhang/jishu';
  } else if (dept.name === '办公室') {
    path = authStore.user?.role === 'member' ? '/buyuan/bangongshi' : '/buzhang/bangongshi';
  } else if (dept.name === '新媒体中心') {
    path = authStore.user?.role === 'member' ? '/buyuan/xinmeiti' : '/buzhang/xinmeiti';
  } else {
    path = dept.path;
  }
  path && router.push(path); 
};
</script>

<style scoped>
.department-section {
  padding: 40px 20px;
  background-color: #ffffff;
  margin: 20px 0;
}

.department-section h2 {
  color: #2c3e50;
  padding-bottom: 15px;
  margin-bottom: 40px;
  font-size: 2.2rem;
  text-align: center;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.department-section h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 3px;
  background-color: #3498db;
}

/* 1. 调整网格容器：缩小卡片间距，修改最小卡片宽度（原200px → 160px） */
.department-grid {
  display: grid;
  /* 最小卡片宽度从200px改为160px，让一行能放更多卡片 */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 2. 调整卡片容器：缩小内边距、高度和边框（原25px padding → 18px，原200px min-height → 160px） */
.department-card {
  /* 内边距缩小，减少卡片内部空白 */
  padding: 18px;
  text-align: center;
  background-color: #f0f7ff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 顶部边框从3px改为2px，更纤细 */
  border-top: 2px solid #3498db;
  /* 最小高度从200px改为160px，整体缩小卡片高度 */
  min-height: 160px;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 3. 调整卡片内部元素：设置SVG图标样式 */
.department-icon {
  /* 设置SVG图标的尺寸 */
  width: 55px;
  height: 55px;
  color: #3498db;
  margin-bottom: 12px;
  transition: all 0.3s;
}

.department-card span {
  /* 文字尺寸从1.3rem → 1.1rem，更紧凑 */
  font-size: 1.3rem;
  color: #2c3e50;
  font-weight: 600;
}

/* 4. 调整hover效果：保持过渡逻辑，适配缩小后的卡片 */
.department-card:hover {
  background-color: #e8f4fd;
  /* 上浮距离从10px改为8px，避免过度夸张 */
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(52, 152, 219, 0.2);
  border-top-color: #2980b9;
}

.department-card:hover i {
  /* 图标放大比例不变，但基数缩小，视觉更协调 */
  transform: scale(1.2) rotate(8deg);
  color: #2980b9;
}

/* 5. 响应式适配：调整不同屏幕下的列数，适配缩小后的卡片 */
@media (max-width: 1200px) {
  .department-grid {
    /* 原3列保持不变，因卡片缩小，3列布局更紧凑 */
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .department-grid {
    /* 原2列保持不变，适配平板屏幕 */
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .department-grid {
    grid-template-columns: 1fr;
  }

  /* 移动端适当放大图标，保证触摸区域和视觉清晰度 */
  .department-card i {
    font-size: 2.5rem;
    width: 60px;
    height: 60px;
  }

  .department-card span {
    font-size: 1.2rem;
  }
}
</style>